<template>
	<view>
		<view class="title">
			<view class="back" @click="goback">
				{{'<'}}
			</view>
			<h1>支付完成</h1>
			<image src="../../static/img/wancheng.png" mode=""></image>
			<h2>支付成功</h2>
			<p>已支付￥{{price}}</p>
			<view class="img">
				<image src="../../static/img/wanchengtupian.png" mode=""></image>
			</view>
		</view>
		<view class="share">
			<h1>立即分享 领取豪礼</h1>
			<button class="fast">立即分享</button>
			<button class="goback" @click="toindex">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:''
			};
		},
		onLoad(data) {
			console.log(data);
			this.price=data.price
		},
		methods:{
			goback(){
				uni.navigateBack()
			},
			toindex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	width: 100%;
	height: 628rpx;
	background: url("../../static/img/di.png") no-repeat;
	background-size: contain;
	text-align: center;
	padding-top: 112rpx;
	position: relative;
	// display: flex;
	// flex-direction: column;
	// justify-content: space-between;
	.back{
		position: absolute;
		top: 110rpx;
		left: 48rpx;
		font-size: 40rpx;
		color: white;
	}
	h1{
		color: white;
	}
	image{
		width: 96rpx;
		height: 96rpx;
		margin: 40rpx 0 28rpx 0;
	}
	h2{
		color: white;
		margin-bottom: 16rpx;
	}
	p{
		color: gray;
	}
	.img{
		width: 314rpx;
		height: 314rpx;
		background: url("../../static/img/zhingjia.png") no-repeat;
		background-size: contain;
		margin: 16rpx auto;
		image{
			width: 250rpx;
			height: 250rpx;
		}
	}
}
.share{
	width: 100%;
	text-align: center;
	margin-top: 56rpx;
	h1{
		font-size: 40rpx;
		margin-bottom: 48rpx;
	}
	.fast{
		width: 542rpx;
		height: 90rpx;
		border-radius: 86rpx;
		background-color: orange;
		color: white;
		margin-bottom: 48rpx;
	}
	.goback{
		width: 542rpx;
		height: 90rpx;
		border-radius: 86rpx;
		border: 1px solid orange;
		color: orange;
		background-color: #fff;
	}
}
</style>
